<template>
	<view>
		<view v-if="show && !goodsDown">
			<!-- #ifdef MP-WEIXIN -->
			<!--标题栏-->
			<np-navbar ref="navBar" :scrollTop="scrollTop" type="transparentFixed">商品详情</np-navbar>
			<!-- #endif -->
			<!-- #ifdef MP-QQ -->
			<np-navbar ref="navBar" :scrollTop="scrollTop" type="transparentFixed">商品详情</np-navbar>
			<!-- #endif -->
			<!--轮播图-->
			<goods-adv :bannerList="bannerList" :video="goods.video"></goods-adv>
			<!--基本信息-->
			<goods-info :goods="goods" :api="api" :recommend="recommendList" @click="buyNow"></goods-info>
			<!--图片详情-->
			<view class="margin-top np-goods-details-box" v-if="bannerList && bannerList.length > 0">
				<image v-for="(item,index) in bannerList" :key="index" :src="item" mode="widthFix" />
			</view>
			<!--相似推荐-->
			<np-div :size="28" :bold="true" color="#333" width="50%">为你推荐</np-div>
			<np-list-two :goodsList="goodsList" :api="api"></np-list-two>
			<!--占位底部距离-->
			<view class="footer-tabbar-height" />
		</view>
		<goods-footer :api="api" :fav="fav" :quan="goods.coupon_quan" @share="toShare" @fav="toFav" @buynow="buyNow"></goods-footer>
		<np-empty v-if="show && goodsDown" info="商品已下架"></np-empty>
		<np-loading v-if="!show" isFullScreen active text="加载中..." color="#39b54a"></np-loading>
		<!--登录提示-->
		<np-login-toast ref="showLogin"></np-login-toast>
		<!-- 分享 -->
		<uni-popup ref="footerShare" type="share">
		    <goods-share title="分享" @select="select"></goods-share>
		</uni-popup>
		<!-- 生成海报 -->
		<goods-canvas v-if="startCanvas" :api="api" :goodsInfo="goods" :link="userShareLink" @close="closeGoodsCanvas"></goods-canvas>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	import item from '@/common/item.js'
	import goodsAdv from './components/goods-adv.vue'
	import goodsInfo from './components/goods-info.vue'
	import goodsFooter from './components/footer.vue'
	import goodsShare from './components/np-share.vue'
	import goodsCanvas from './components/goods-canvas.vue'
	export default {
		mixins: [base,item],
		components: {
			goodsAdv,
			goodsInfo,
			goodsFooter,
			goodsShare,
			goodsCanvas
		},
		data() {
			return {
				api: 'pdd'
			}
		}
	}
</script>

<style lang="scss">
	.np-goods-details-box {
		position: relative;
		width: 100%;

		image {
			width: 100%;
		}
	}

	.goods-canvas {
		position: relative;
		padding: 10rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.footer-tabbar-height {
		min-height: 100upx;
		height: calc(100upx + env(safe-area-inset-bottom) / 2);
	}
</style>
